<template>
	<uni-nav-bar title="发起预约" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<view class="package" style="border-radius:30px;text-align:center;color:#666;"
		@click="navTo('administrator/initiate/searchs')">搜索群
	</view>
	<cc-defineCateList :data="crowdList" :height="pageHeight" state="qun" @click="submit"></cc-defineCateList>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { navBack, navTo } from '@/utils/navigator';
	import { errorToast, showLoading, successToast } from '@/utils/prompt';
	import { toPublish } from '@mqtt';
	import { getQun } from '@/gql/dispatch';
	const crowdList = ref()
	const pageHeight = ref();
	uni.getSystemInfo({
		success: function (res) {
			pageHeight.value = res.windowHeight - 104;
		}
	});
	init()
	function init() {
		showLoading()
		const payload = {
			query: getQun,
		};
		toPublish(
			'ql/control/getQun',
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { getQun } = obj.data;
				crowdList.value = getQun
			}
		);
	}
	function submit(num : string) {
		showLoading()
		const payload = {
			chat_id: num
		};
		toPublish(
			'control/fasongQunSubscribe',
			payload,
			(obj : any) => {
				uni.hideLoading();
				const { code, msg } = obj;
				if (code === 1) {
					successToast(msg)
				} else {
					errorToast(msg)
				}
			}
		);
	}
</script>
<style scoped lang="less">
	input {
		text-align: center;
	}

	.but {
		width: 460rpx;
		height: 98rpx;
		background: #3F90FF;
		border-radius: 10rpx;
		text-align: center;
		line-height: 98rpx;
		margin: 0rpx auto 20rpx;
		color: #fff;
	}

	.groupList {
		width: 100%;
		align-content: flex-start;
		flex-wrap: wrap;
		padding: 20rpx;
		box-sizing: border-box;

		view {
			width: 48%;
			height: 102rpx;
			background: #EAEAEA;
			border-radius: 10rpx;
			text-align: center;
			margin-bottom: 20rpx;
		}
	}
</style>